<template>
	<el-form ref="ruleFormRef" label-position="top" :model="formInline" :rules="formRules" label-width="auto" v-loading="isLoading">
		<el-row :gutter="30">

			<!-- <re-col :value='12' :xs='24' :sm='24'>
				<el-form-item :label='titles?.id' prop='id'>
					<el-input v-model='formInline.id' clearable :placeholder='prompt?.id' />
				</el-form-item>
			</re-col> -->
			<re-col :value='12' :xs='12' :sm='12'>
				<el-form-item :label='titles?.projectName' prop='projectName'>
					<el-input :maxlength="30" :show-word-limit="true" v-model='formInline.projectName' clearable :placeholder='prompt?.projectName' />
				</el-form-item>
			</re-col>

			<re-col :value='12' :xs='12' :sm='12'>
				<el-form-item :label='titles?.contactName' prop='contactName'>
					<el-input :maxlength="30" :show-word-limit="true" v-model='formInline.contactName' clearable :placeholder='prompt?.contactName' />
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='12' :sm='12'>
				<el-form-item :label='titles?.contactPhone' prop='contactPhone'>
					<el-input v-model='formInline.contactPhone' clearable :placeholder='prompt?.contactPhone' />
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='12' :sm='12'>
				<el-form-item :label='titles?.city' prop='city'>
					<el-cascader style="width: 100%;" :options="CityDatas.options" v-model="formInline.city"
						:show-all-levels="true"
						:props="{ multiple: false, checkStrictly: false, emitPath: true, value: 'label', label: 'label' }"
						@change="cityChange($event)" placeholder="请输入项目所在城市">
					</el-cascader>
					<!-- {{ isNullOrEmpty( regionData ) }} -->
					<!-- <el-input v-model='formInline.city' clearable :placeholder='prompt?.city' /> -->
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='12' :sm='12'>
				<el-form-item :label='titles?.buildDate' prop='buildDate'>
					<!-- <el-input v-model='formInline.buildDate' clearable :placeholder='prompt?.buildDate' /> -->
					<el-date-picker style="width: 100%;" class="pickerW" value-format="YYYY-MM-DD"	 v-model='formInline.buildDate' type="date" :placeholder='prompt?.buildDate' />
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='12' :sm='12'>
				<el-form-item :label='titles?.address' prop='address'>
					<el-input :maxlength="30" :show-word-limit="true" v-model='formInline.address' clearable :placeholder='prompt?.address' />
				</el-form-item>
			</re-col>
			<re-col :value='24' :xs='24' :sm='24'>
				<el-form-item :label='titles?.remark' prop='remark'>
					<el-input 
					 :maxlength="100" :show-word-limit="true"
					v-model='formInline.remark' 
					
					:autosize="{ minRows: 4 }"
					type="textarea" 
					clearable 
					:placeholder='prompt?.remark' />
				</el-form-item>
			</re-col>

			<!-- <re-col :value='12' :xs='24' :sm='24'>
				<el-form-item :label='titles?.remark' prop='remark'>
					
					<Maps v-model:center.sync="mapdata.center" v-model:area="mapdata.area" :isEdit="true"></Maps>
				</el-form-item>
			</re-col> -->
		</el-row>
	</el-form>
</template>

<script setup lang="ts">
import { isNullOrEmpty } from '@/utils/functions'
import Maps from "@/views/operate/project-management/project-management/components/map.vue"
import { ref, reactive } from "vue";
import ReCol from "@/components/ReCol";
import type { FormRules } from "element-plus";
import { titles, prompt } from './index';
import type { infoType } from '@/api/operate/project-management/projectManagement/index';
import { regionData } from "element-china-area-data";

type FormProps = {
	formInline: infoType,
	isLoading: boolean
}
const mapdata = reactive({
	center: [],
	area: []
})
const CityDatas = reactive({
	options: regionData,
})
const props = withDefaults(defineProps<FormProps>(), {
	formInline: () => ({} as infoType),
	isLoading: false
});
const cityChange = (e) => { //城市选择
	props.formInline.city = e
}
const formRules = reactive(<FormRules>{
	projectName: [
		{ required: true, message: prompt?.projectName, trigger: "blur" }],
	address: [{ required: true, message: prompt?.address, trigger: "blur" }],
	city: [{ required: true, message: prompt?.city, trigger: "change" }],
	buildDate: [{ required: true, message: prompt?.buildDate, trigger: "change" }]
});
const ruleFormRef = ref();

// const changeopenFunc = (e)=>{
// 	props.formInline.openFunc = e

// }
//    const newFormInline = ref(props.formInline as any);
//
//
//    watch(()=>props.formInline,()=>{
//    	newFormInline.value = props.formInline
//    },{
//    	deep:true,
//    	immediate:true
//    })
function getRef() {
	return ruleFormRef.value;
}

defineExpose({ getRef });
</script>
<style lang="scss" scoped >
.pickerW{
	width: 100% !important;
}
</style>
